<template>
	<view class="coupon-get">
		<view class="order-item-box">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
			auto: false,
		  	noMoreSize: 10,
		  	empty: {
		  		icon: $getImageUri('resource/image/shopapi/uniapp/empty/coupon.png'),
		  		tip: $zhTran('暂无使用明细记录~'),
		  		fixed: true
		  	}
		  }" :bottom="0" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="coupon" v-for="item in couponList" :key="item.id">
					<view class="p-30 bg-white m-b-30">
						<view class="u-border-bottom p-b-20">{{$zhTran('订单编号')}}:{{item.association_sn}}</view>
						<view class="flex row-between m-t-20 m-b-20">
							<view class="title">{{item.change_type}}</view>
							<view class="money"
								:style="[{color:item.action==1?'rgba(238, 10, 37, 1)':'rgba(43, 162, 69, 1)'}]">
								{{item.action == 1?'-':'+'}}{{item.change_amount}}
							</view>
						</view>
						<view class="muted">{{$zhTran('变更前金额')}}:{{item.before_amount}}</view>
						<view class="muted">{{$zhTran('剩余金额')}}:{{item.left_amount}}</view>
						<view class="muted">{{$zhTran('变更日期')}}:{{item.create_time}}</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>


<script>
	import {
		apiCouponLogList,
	} from '@/api/store'

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

	export default {
		name: 'CouponGet',
		mixins: [MescrollMixin],

		data() {
			return {
				couponId: '',
				couponList: [], // 优惠券列表
			}
		},

		methods: {
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCouponLogList({
					page_no: num,
					page_size: size,
					coupon_list_id: this.couponId
				}).then(({
					lists,
					page_size,
					count
				}) => {
					if (num === 1) this.couponList = []
					this.couponList = [...this.couponList, ...lists]
					this.couponList = this.$zhTran(this.couponList)
					// mescroll.endBySize(page_size, count)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
		},

		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			const options = this.$Route.query;
			this.couponId = options.id || ''
			if (this.couponId == '') {
				this.$toast({
					title: this.$zhTran('获取记录失败'),
					endtime: 1200
				}, {
					tab: 5,
					url: '/bundle/pages/coupon/coupon'
				});
				return
			}
			this.refreshOrderData()
		},
	}
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
		padding: 0;
	}

	.coupon-get {
		padding: 20rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.coupon {

		.money,
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>